<template>
 <div>
   <el-skeleton  :loading="loading" animated >
  <div class="topPlan-wrap">
    <div class="topPlanWrap-card">
      <div>
        <h2>免费制定您的个人计划</h2>
        <h5 style="color: #E4E7ED">
          最专业的健身动作库：超过3000+动作
        </h5>
        <h5 style="color: #E4E7ED">最全面的健身计划库：超过500+计划</h5>
      </div>
    </div>
  </div>
   <div>
     <h3>为了无法计算的价值</h3>
     <el-divider content-position="left">健身项目</el-divider>
   </div>
  <div class="content-box" v-infinite-scroll="load">
    <el-row>
      <el-col :span="6" v-for="(o,index) in dataList" :key="index">
        <el-card :body-style="{ padding: '10px' }">
          <div @click="open(o.hairId)" style="cursor:pointer;">
          <img :src="o.hairImg" class="image">
            <span>{{o.hairName}}</span>
            <div class="twoLineCls" slot="reference">
              <el-alert
                  title="简介"
                  type="success"
                  :description="o.hairDes"
                  :closable="false">
              </el-alert>
            </div>

            <div class="bottom clearfix">
              <el-tag type="warning" >￥{{ o.hairPrice }}</el-tag>
              <el-tag> {{o.hairTypeName}}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
   </el-skeleton>

 </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      dataList:[],
      page:1,
      pageSize:8,
      loading:false
    }
  },
  methods:{
    open(id){
      //TODO
      this.$router.push({
        // path: 'edit',
        name:'projectDetail',
        params:{id},
      })
      console.log(id)
    },
    load () {
      // this.dataList =[...this.dataList,...this.dataList]
    },
    async  getList(page,size){
      const res= await this.$axios.get('/api/project/list', {params:{page:page, size:size}})
        console.log(res);
        this.dataList=res.data.content.list
    },

  },
  mounted() {
    this.getList(this.page-1,this.pageSize)
  }
}
</script>

<style scoped lang="less">
.topPlan-wrap{
  //margin-top: 45px;
  height: 450px;
  background-image: url("http://127.0.0.1:8089/index-bg.jpg");
.topPlanWrap-card{
  width: 300px;
  height: 400px;
  color: #f9fafc;
  background-color:rgba(46,41,37,0.2);
  float: left;
}
}
.content-box{
  margin-top: 15px;

}


//.el-card:hover{
//  margin-bottom: -5px;
//}
.el-card {
  margin-top: 10px;
  margin-left: 10px;
  transition: all .5s;
  .image {
    width: 100%;
    display: block;
  }
}

.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  line-height: 12px;
}

.clearfix:after {
  clear: both
}
//.el-card:hover{
//  margin-top: -5px;
//}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  margin-top: 15px;
  border-radius: 4px;
}
</style>